<template>
  <div>
    <my-header :title="title"></my-header>
    <van-calendar
      color='#1989fa'
      title="日历"
      :poppable="false"
      :show-confirm="false"
      :style="{ height: '50rem' }"
      :formatter="formatter"
      row-height='85'
    />
    <tabber></tabber>
  </div>
</template>

<script>
import Tabber from "@/components/Tabber";
import MyHeader from "@/components/MyHeader";
import { Calendar } from "vant";
export default {
  components: {
    Tabber,
    MyHeader,
    Calendar,
  },
  data() {
    return {
      title: "值班表",
    };
  },
  methods: {
      formatter(day) {
      const month = day.date.getMonth() + 1;
      const date = day.date.getDate();
    //   day.className='van-calendar__day'
      if (month === 12) {
        if (date === 8) {
          day.topInfo = "张三";
        //   day.text = '李四'
          day.bottomInfo = '李狗蛋'
        } else if (date === 4) {
            day.topInfo = '张全蛋';
            }
      }
      console.log(day.className)

      return day;
    },
  }
};
</script>

<style scoped>
     .van-calendar__day{
        color: brown;
        align-items: flex-start;
    }
     .van-calendar__selected-day {
        align-items: flex-start;
    }

</style>